<template>
  <div class="supervise_info">
    <a-spin size="large" :spinning="spinning">
      <div class="div-base-content">
        <div class="title-label">归档信息</div>
        <div class="form-div">
          <a-form-model :model="baseForm" ref="baseForm" :rules="baseFormRule">
            <a-col :md="8" :sm="24">
              <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="案号:" prop="code">
                <a-tooltip placement="topLeft">
                  <template slot="title">
                    {{ baseForm.code ? baseForm.code : '暂无数据' }}
                  </template>
                  <span class="fix-span-content"> {{ baseForm.code ? baseForm.code : '暂无数据' }}</span>
                </a-tooltip>
              </a-form-model-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="申请人:" prop="applicantname">
                <a-tooltip placement="topLeft">
                  <template slot="title">
                    {{ baseForm.applicantname ? baseForm.applicantname : '暂无数据' }}
                  </template>
                  <span class="fix-span-content">
                    {{ baseForm.applicantname ? baseForm.applicantname : '暂无数据' }}</span
                  >
                </a-tooltip>
              </a-form-model-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="被申请人:" prop="targetname">
                <a-tooltip placement="topLeft">
                  <template slot="title">
                    {{ baseForm.targetname ? baseForm.targetname : '暂无数据' }}
                  </template>
                  <span class="fix-span-content"> {{ baseForm.targetname ? baseForm.targetname : '暂无数据' }}</span>
                </a-tooltip>
              </a-form-model-item>
            </a-col>

            <a-col :md="8" :sm="24">
              <a-form-model-item
                :label-col="labelCol"
                :wrapper-col="wrapperCol"
                label="收案日期:"
                prop="acceptancedate"
              >
                <span class="fix-span-content">
                  {{ baseForm.acceptancedate ? baseForm.acceptancedate : '暂无数据' }}</span
                >
              </a-form-model-item>
            </a-col>

            <a-col :md="8" :sm="24">
              <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="结案日期:" prop="closeingdate">
                <span class="fix-span-content"> {{ baseForm.closeingdate ? baseForm.closeingdate : '暂无数据' }}</span>
              </a-form-model-item>
            </a-col>

            <a-col :md="8" :sm="24">
              <a-form-model-item
                :label-col="labelCol"
                :wrapper-col="wrapperCol"
                label="立案日期:"
                prop="caserecorddate"
              >
                <span class="fix-span-content">
                  {{ baseForm.caserecorddate ? baseForm.caserecorddate : '暂无数据' }}</span
                >
              </a-form-model-item>
            </a-col>

            <a-col :md="8" :sm="24">
              <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="保存期限:" prop="storagelimit">
                <a-input v-if="isEdit" placeholder="请填写保存期限" v-model="baseForm.storagelimit" />
                <span v-else class="fix-span-content">
                  {{ baseForm.storagelimit ? baseForm.storagelimit : '暂无数据' }}</span
                >
              </a-form-model-item>
            </a-col>

            <a-col :md="8" :sm="24">
              <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="案件承办人:">
                <span class="fix-span-content"> {{ baseForm.handlername ? baseForm.handlername : '暂无数据' }}</span>
              </a-form-model-item>
            </a-col>

            <a-col :md="8" :sm="24" v-if="isEdit">
              <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="案件检查人:" prop="checkper">
                <span style="margin-left: 10px"> {{ baseForm.checkper }} </span>
                <a type="link" style="margin-left: 10px" @click="openCheckerModal">选择</a>
              </a-form-model-item>
            </a-col>

            <a-col :md="24" :sm="24">
              <a-form-model-item :label-col="{ span: 2 }" :wrapper-col="{ span: 20 }" label="案由:" prop="reason">
                <a-textarea
                  v-if="isEdit"
                  placeholder="请填写案由"
                  v-model="baseForm.reason"
                  :auto-size="{ minRows: 3, maxRows: 5 }"
                ></a-textarea>
                <div v-else class="fix-div-content">{{ baseForm.reason ? baseForm.reason : '暂无数据' }}</div>
              </a-form-model-item>
            </a-col>

            <a-col :md="24" :sm="24" class="large_model_item_css">
              <a-form-model-item :label-col="{ span: 2 }" :wrapper-col="{ span: 20 }" label="案卷情况说明:">
                <a-textarea
                  v-if="isEdit"
                  :maxLength="3000"
                  placeholder="请填写案由"
                  v-model="baseForm.detail"
                  :auto-size="{ minRows: 3, maxRows: 5 }"
                ></a-textarea>
                <div v-else class="fix-div-content">{{ baseForm.detail ? baseForm.detail : '暂无数据' }}</div>
              </a-form-model-item>
            </a-col>
          </a-form-model>
        </div>
      </div>
      <div class="div-base-content">
        <div class="title-label">纸质卷信息</div>
        <div class="form-div" style="padding: 0px">
          <a-form-model :model="baseForm" ref="paperDocForm">
            <a-col :md="6" :sm="24">
              <a-form-model-item
                v-if="isEdit"
                :label-col="papgerlabelCol"
                :wrapper-col="papgerwrapperCol"
                label="正卷:"
              >
                <a-input-number :min="0" class="count-paper-input" v-model="baseForm.paperpositivebook" /> 册
                <a-input-number :min="0" class="count-paper-input" v-model="baseForm.paperpositivepage" /> 页
              </a-form-model-item>
              <a-form-model-item v-else :label-col="papgerlabelCol" :wrapper-col="papgerwrapperCol" label="正卷:">
                <span class="count-papger-style">
                  {{ baseForm.paperpositivebook + '   册   ' + baseForm.paperpositivepage + '   页   ' }}
                </span>
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-model-item
                v-if="isEdit"
                :label-col="papgerlabelCol"
                :wrapper-col="papgerwrapperCol"
                label="副卷:"
              >
                <a-input-number :min="0" class="count-paper-input" v-model="baseForm.paperreversebook" /> 册
                <a-input-number :min="0" class="count-paper-input" v-model="baseForm.paperreversepage" /> 页
              </a-form-model-item>
              <a-form-model-item v-else :label-col="papgerlabelCol" :wrapper-col="papgerwrapperCol" label="副卷:">
                <span class="count-papger-style">
                  {{ baseForm.paperreversebook + '   册   ' + baseForm.paperreversepage + '   页   ' }}
                </span>
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-model-item
                v-if="isEdit"
                :label-col="papgerlabelCol"
                :wrapper-col="papgerwrapperCol"
                label="其他卷:"
              >
                <a-input-number :min="0" class="count-paper-input" v-model="baseForm.paperotherbook" /> 册
                <a-input-number :min="0" class="count-paper-input" v-model="baseForm.paperotherpage" /> 页
              </a-form-model-item>
              <a-form-model-item v-else :label-col="papgerlabelCol" :wrapper-col="papgerwrapperCol" label="其他卷:">
                <span class="count-papger-style">
                  {{ baseForm.paperotherbook + '   册   ' + baseForm.paperotherpage + '   页   ' }}
                </span>
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-model-item :label-col="papgerlabelCol" :wrapper-col="papgerwrapperCol" label="总卷数:">
                <span class="count-papger-style">
                  {{ pagpertotalbook + '   册   ' + pagpertotalpage + '   页   ' }}
                </span>
              </a-form-model-item>
            </a-col>
          </a-form-model>
        </div>
      </div>
      <div class="div-base-content">
        <div class="title-label">电子卷信息</div>
        <div class="form-div" style="padding: 0px">
          <a-form-model :model="baseForm" ref="eleDocForm">
            <a-col :md="6" :sm="24">
              <a-form-model-item :label-col="papgerlabelCol" :wrapper-col="papgerwrapperCol" label="正卷:">
                <span class="count-papger-style">
                  {{
                    `${
                      baseForm.elepositivebook != null && baseForm.elepositivebook != undefined
                        ? baseForm.elepositivebook
                        : 0
                    } 册 ${
                      baseForm.elepositivepage != null && baseForm.elepositivepage != undefined
                        ? baseForm.elepositivepage
                        : 0
                    } 页 `
                  }}
                </span>
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-model-item :label-col="papgerlabelCol" :wrapper-col="papgerwrapperCol" label="副卷:">
                <span class="count-papger-style">
                  {{
                    `${
                      baseForm.elereversebook != null && baseForm.elereversebook != undefined
                        ? baseForm.elereversebook
                        : 0
                    } 册 ${
                      baseForm.elereversepage != null && baseForm.elereversepage != undefined
                        ? baseForm.elereversepage
                        : 0
                    } 页 `
                  }}
                </span>
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-model-item :label-col="papgerlabelCol" :wrapper-col="papgerwrapperCol" label="其他卷:">
                <span class="count-papger-style">
                  {{
                    `${
                      baseForm.eleotherbook != null && baseForm.eleotherbook != undefined ? baseForm.eleotherbook : 0
                    } 册 ${
                      baseForm.eleotherpage != null && baseForm.eleotherpage != undefined ? baseForm.eleotherpage : 0
                    } 页 `
                  }}
                </span>
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-model-item :label-col="papgerlabelCol" :wrapper-col="papgerwrapperCol" label="总卷数:">
                <span class="count-papger-style">
                  {{
                    `${
                      baseForm.eletotalbook != null && baseForm.eletotalbook != undefined ? baseForm.eletotalbook : 0
                    } 册 ${
                      baseForm.eletotalpage != null && baseForm.eletotalpage != undefined ? baseForm.eletotalpage : 0
                    } 页 `
                  }}
                </span>
              </a-form-model-item>
            </a-col>
          </a-form-model>
        </div>
      </div>
    </a-spin>

    <!-- 检查人 -->
    <a-modal v-model="checkerModalShow" title="选择检查人" destroyOnClose @ok="closeCheckerModal()">
      <a-form-model>
        <a-form-model-item label="检查人">
          <deptUserTree
            :type="'user'"
            :multiple="true"
            @save="checkerSelect"
            :departList="ADMREVIEW_DEPART"
            :filterOrgIds="['3601001001', '3601001002', '3601001003']"
          ></deptUserTree>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import storage from 'store'
import { APP_USER } from '@/store/mutation-types.js'
import { saveArchive, getArchiveByApplyid } from '@/api/archive/apl_archive.js'
import { viewSupervise } from '@/api/supervise/apl_supervise.js'
import moment from 'moment'
import { ADMREVIEW_DEPART } from '@/utils/custom/custom-depart.js'
export default {
  props: {
    applyid: {
      type: String,
      required: true
    },
    isEdit: {
      type: Boolean,
      required: true
    },
    reason: {
      type: String,
      required: false
    }
  },
  data () {
    return {
      ADMREVIEW_DEPART: ADMREVIEW_DEPART, // 行政复议相关科室
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      papgerlabelCol: { span: 6 },
      papgerwrapperCol: { span: 18 },
      baseForm: {
        id: '', // applyid
        code: '', // 案号
        applicantname: '', // 申请人
        targetname: '', // 被申请人
        thirdname: '', // 第三人
        acceptancedate: undefined, // 收案日期
        closeingdate: undefined, // 结案日期
        caserecorddate: undefined, // 立案日期
        storagelimit: undefined, // 保存期限
        handlerid: '', //  // 案件承办人id
        handlername: '', // 案件承办人
        reason: '', // 案由
        detail: '', // 案卷情况说明
        paperpositivebook: undefined, // 纸质正卷 册数
        paperpositivepage: undefined, // 纸质正卷 页数
        paperreversebook: undefined, // 纸质副卷 册数
        paperreversepage: undefined, // 纸质副卷 页数
        paperotherbook: undefined, // 其他卷  册数
        paperotherpage: undefined, // 其他卷 页数
        elepositivebook: undefined, // 电子正卷 册数
        elepositivepage: undefined, // 电子正卷 页数
        elereversebook: undefined, // 电子副卷 册数
        elereversepage: undefined, // 电子副卷 页数
        eleotherbook: undefined, // 电子其他卷 册数
        eleotherpage: undefined, // 电子其他卷 页数数
        loguserid: undefined, // 归档人
        logusername: undefined, // 归档人名称
        logtime: undefined, // 归档时间
        checkper: undefined, // 检查人
        checkperid: undefined // 检查人id
      },
      baseFormRule: {
        storagelimit: [
          { required: true, message: '请输入保存期限', trigger: 'blur' },
          { max: 50, message: '长度不能超过50', trigger: 'blur' }
        ],
        checkper: [{ required: true, message: '请选择检查人', trigger: 'change' }],
        reason: [
          { required: true, message: '请输入案由', trigger: 'blur' },
          { max: 3000, message: '长度不能超过3000', trigger: 'blur' }
        ]
      },
      loading: false,
      currentUser: storage.get(APP_USER), // 登录人信息
      checkerModalShow: false, // 对应的检查人选择框
      spinning: false
    }
  },
  computed: {
    pagpertotalbook () {
      return this.baseForm.paperpositivebook + this.baseForm.paperreversebook + this.baseForm.paperotherbook
    },
    pagpertotalpage () {
      return this.baseForm.paperpositivepage + this.baseForm.paperreversepage + this.baseForm.paperotherpage
    },
    eletotalbook () {
      return this.baseForm.elepositivebook + this.baseForm.elereversebook + this.baseForm.eleotherbook
    },
    eletotalpage () {
      return this.baseForm.elepositivepage + this.baseForm.elereversepage + this.baseForm.eleotherpage
    }
  },
  components: {
    deptUserTree: () => import('@/views/base/DeptUserTree.vue')
  },
  created () {
    this.init()
  },
  mounted () {},
  methods: {
    init () {
      if (!this.isEdit) {
        this.baseFormRule = {}
      }
      this.getArchiveData()
    },
    // 通过applyid查询对应的归档数据
    getArchiveData () {
      const _this = this
      this.spinning = true
      if (this.applyid != null && this.applyid != undefined) {
        getArchiveByApplyid({ applyid: this.applyid })
          .then(async res => {
            if (res.code == 0) {
              _this.baseForm = Object.assign(_this.baseForm, res.data)
              _this.baseForm = res.data
              // 查询对应的承办人
              const res2 = await viewSupervise(this.applyid)
              if (res2.code == 0) {
                // 设置当前的承办人
                const superviseObj = res2.data
                let handledName = ''
                // 案件承办人
                if (superviseObj.firstname) {
                  handledName = superviseObj.secondname
                    ? superviseObj.firstname + '，' + superviseObj.secondname
                    : superviseObj.firstname
                }
                _this.baseForm.handlername = handledName
              }
              // 格式化时间
              // 编辑模式下默认带出案由
              if (this.isEdit) {
                this.baseForm.reason = this.baseForm.reason ? this.baseForm.reason : this.reason
              }
            } else {
              _this.$refs.baseForm.resetFields()
              _this.$refs.paperDocForm.resetFields()
              _this.$refs.eleDocForm.resetFields()
            }
          })
          .finally(() => {
            this.spinning = false
          })
      } else {
        this.$message.error('当前未传入applyid')
      }
    },
    isValidate () {
      let result
      this.$refs.baseForm.validate(valid => {
        result = valid
      })
      return result
    },
    save () {
      this.$refs.baseForm.validate(valid => {
        this.loading = true
        if (valid) {
          const archiveData = this.baseForm
          if (archiveData.acceptancedate) {
            archiveData.acceptancedate = this.$moment(archiveData.acceptancedate).format('YYYY-MM-DD')
          }
          // 保存当前的记录人
          archiveData.loguserid = this.currentUser.userId
          archiveData.logusername = this.currentUser.fullname
          archiveData.logtime = this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
          saveArchive(archiveData).then(res => {
            if (res.code == 0) {
              this.$message.success('保存成功')
            } else {
              this.$message.error('保存失败')
            }
          })
        } else {
          this.loading = false
        }
      })
    },
    openCheckerModal () {
      this.checkerModalShow = true
    },
    closeCheckerModal () {
      // 校验表单
      this.$refs.baseForm.validate()
      this.checkerModalShow = false
    },
    // 检查人选择
    async checkerSelect (array) {
      console.log('检查人', array)
      if (array) {
        const ids = []
        const names = []
        array.forEach(el => {
          if (el) {
            ids.push(el.id)
            names.push(el.name)
          }
        })
        this.baseForm.checkperid = ids.join('，')
        this.baseForm.checkper = names.join('，')
      } else {
        this.$message.warning('未获取到检查人')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.div-base-content {
  display: block;
}

.title-label {
  font-size: 16px;
  font-weight: 800;
  width: 200px;
  height: 40px;
  padding: 10px 20px;
}

.form-div {
  padding: 20px 20px;
  display: inline-block;
  width: 100%;
}

::v-deep .ant-input-number {
  margin-left: 10px;
  margin-right: 10px;
}
.count-paper-input {
  width: 50px;
}

.fix-span-content {
  font-size: 14px;
  padding-left: 20px;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
}
.fix-div-content {
  font-size: 14px;
  padding-left: 20px;
  max-height: 150px;
  overflow: auto;
}

.count-papger-style {
  padding-left: 20px;
  font-size: 16px;
  min-width: 200px;
  width: 200px;
  display: inline-block;
  padding-right: 20px;
}
.large_model_item_css {
  ::v-deep .ant-form-item-label {
    min-width: 100px;
  }
}
.supervise_info {
  // margin-top: 20px;
//   ::v-deep .ant-tabs-nav-wrap{
// height: 65px !important;

//   }
  // ::v-deep .ant-tabs-nav-wrap {
  //   height: 65px !important;
  //   margin-top: 30px !important;
  // }
  // ::v-deep .ant-breadcrumb{
  //   margin-left: 15px !important;
  // }
}
</style>
